<template>
    <div class="page coach-page">
        <div class="banner">
            <div class="banner-image" style="background-image: url('/images/training_detail_banner.jpg')">
                <span>培训详情</span>
                <p>TRAINING DETAILS</p>
            </div>
        </div>
        <div class="content">
            <PlatformCrumb back="收费课程" style="    margin-top: 0;">
            </PlatformCrumb>
            <!-- 富文本区域 -->
            <div class="training-content" v-if="!shoufei">
                <div class="training-content-header">
                    <span>{{dataForm.name}}</span>
                    <p>时间:{{Moment(dataForm.createTime).format('YYYY-MM-DD')}} </p>
                </div>
                <div class="training-content-text">
                    <div v-if="dataForm.video!=''" class="platform-video" style="margin-bottom:20px">
                        <video width="650" height="370" :src="dataForm.video|filtersImg" controls="controls">
                            your browser does not support the video tag
                        </video>
                    </div>
                    <pre v-html="dataForm.doc">
                    </pre>
                    <img v-if="dataForm.imgs" :src="dataForm.imgs|filtersImg"
                         style="margin:20px auto;display: block;color:red" alt="图片错误">
                </div>
            </div>
            <div class="training-content" v-if="shoufei">
                <div class="sfts">
                    <el-button type="danger" @click="ispay=true">收费课程付费后可观看</el-button>
                </div>
            </div>
        </div>
        <el-dialog
                title="支付"
                :visible.sync="ispay"
                width="70%">
            <pay :id="id2" type="3" :money="money" :ispay="ispay" @paysuccess="paysuccess"></pay>
        </el-dialog>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import {basefile, imgupload} from '@/config/env.js';
    import pay from '@/components/pay/pay';
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    export default {
        components: {
            pay,
            PlatformCrumb
        },
        data() {
            return {
                key: "value",
                dataForm: {
                    video: '',
                    imgs: '',

                },
                ispay: false,
                shoufei: false,
                id2: this.$route.query.id,
                money: this.$route.query.money,
            }
        },

        computed: {
            id() {
                return this.$route.query
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'fetchTrainingDetail',
                'ordersfindPay',
            ]),
            // 支付成功返回
            paysuccess() {
                this.ispay = false
                this.shoufei = false
                this.getispay()
            },
            // 获取详情
            getDetail() {
                this.fetchTrainingDetail(this.id).then(res => {
                    const {code, data} = res
                    if (code === 200) {
                        console.log(data)
                        this.dataForm = data || {}
                    }
                })
            },
            // 查询是否已经购买
            getispay() {
                this.ordersfindPay({courseId: this.$route.query.id}).then(res => {
                    const {code, data} = res
                    if (code === 200) {
                        if (data.have) {
                            this.getDetail()
                        } else {
                            this.ispay = true
                            this.shoufei = true
                        }
                        // console.log(data)
                        // this.dataForm = data || {}
                    }
                })
            },
        },

        created() {
            this.getispay()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
    }
</script>

<style scoped>
    @import url("./css/coachTraining.css");

    .sfts {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 20px;
        padding-top: 20px;
    }
</style>
